.navbar
  .navbar-inner
    .left.sliding
      a(href="forms.html").back.link
        i.icon.icon-back
        span Forms
    .center.sliding Form Elements
    .right
      a(href="#").link.open-panel.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="form-elements")
    .page-content
      .content-block-title Full Layout
      .list-block
        ul
          li
            .item-content
              .item-media
                i.icon.icon-form-name
              .item-inner 
                .item-title.label Name
                .item-input
                  input(type="text", placeholder="Your name")
          li
            .item-content
              .item-media
                i.icon.icon-form-email
              .item-inner 
                .item-title.label E-mail
                .item-input
                  input(type="email", placeholder="E-mail")
          li
            .item-content
              .item-media
                i.icon.icon-form-url
              .item-inner 
                .item-title.label URL
                .item-input
                  input(type="url", placeholder="URL")
          li
            .item-content
              .item-media
                i.icon.icon-form-password
              .item-inner 
                .item-title.label Password
                .item-input
                  input(type="password", placeholder="Password")
          li
            .item-content
              .item-media
                i.icon.icon-form-tel
              .item-inner 
                .item-title.label Phone
                .item-input
                  input(type="tel", placeholder="Phone")
          li
            .item-content
              .item-media
                i.icon.icon-form-gender
              .item-inner 
                .item-title.label Gender
                .item-input
                  select
                    option Male
                    option Female
          li
            .item-content
              .item-media
                i.icon.icon-form-calendar
              .item-inner 
                .item-title.label Birth date
                .item-input
                  input(type="date", placeholder="Birth day", value="2014-04-30")
          li
            .item-content
              .item-media
                i.icon.icon-form-calendar
              .item-inner 
                .item-title.label Date time
                .item-input
                  input(type="datetime-local", placeholder="Birth day")
          li
            .item-content
              .item-media
                i.icon.icon-form-toggle
              .item-inner 
                .item-title.label Switch
                .item-input
                  label.label-switch
                    input(type="checkbox")
                    .checkbox
          li
            .item-content
              .item-media
                i.icon.icon-form-settings
              .item-inner
                .item-title.label Slider
                .item-input
                  .range-slider
                    input(type="range", min="0", max="100", value="50", step="0.1")
          li.align-top
            .item-content
              .item-media
                i.icon.icon-form-comment
              .item-inner 
                .item-title.label Textarea
                .item-input
                  textarea
          li.align-top
            .item-content
              .item-media
                i.icon.icon-form-comment
              .item-inner 
                .item-title.label Resizeable
                .item-input
                  textarea.resizable
      .content-block-title Icons and inputs
      .list-block
        ul
          li
            .item-content
              .item-media
                i.icon.icon-form-name
              .item-inner 
                .item-input
                  input(type="text", placeholder="Your name")
          li
            .item-content
              .item-media
                i.icon.icon-form-email
              .item-inner 
                .item-input
                  input(type="email", placeholder="E-mail")
          li
            .item-content
              .item-media
                i.icon.icon-form-gender
              .item-inner 
                .item-input
                  select
                    option Male
                    option Female
          li
            .item-content
              .item-media
                i.icon.icon-form-calendar
              .item-inner 
                .item-input
                  input(type="date", placeholder="Birth day", value="2014-04-30")
          li
            .item-content
              .item-media
                i.icon.icon-form-toggle
              .item-inner 
                .item-input
                  label.label-switch
                    input(type="checkbox")
                    .checkbox
      .content-block-title Labels and inputs
      .list-block
        ul
          li
            .item-content
              .item-inner 
                .item-title.label Name
                .item-input
                  input(type="text", placeholder="Your name")
          li
            .item-content
              .item-inner 
                .item-title.label E-mail
                .item-input
                  input(type="email", placeholder="E-mail")
          li
            .item-content
              .item-inner 
                .item-title.label Gender
                .item-input
                  select
                    option Male
                    option Female
          li
            .item-content
              .item-inner 
                .item-title.label Birth date
                .item-input
                  input(type="date", placeholder="Birth day", value="2014-04-30")
          li
            .item-content
              .item-inner 
                .item-title.label Switch
                .item-input
                  label.label-switch
                    input(type="checkbox")
                    .checkbox
      .content-block-title Just inputs
      .list-block
        ul
          li
            .item-content
              .item-inner 
                .item-input
                  input(type="text", placeholder="Your name")
          li
            .item-content
              .item-inner 
                .item-input
                  input(type="email", placeholder="E-mail")
          li
            .item-content
              .item-inner 
                .item-input
                  select
                    option Male
                    option Female
          li
            .item-content
              .item-inner 
                .item-input
                  input(type="date", placeholder="Birth day", value="2014-04-30")
      .content-block-title Inset, just inputs
      .list-block.inset
        ul
          ul
          li
            .item-content
              .item-inner 
                .item-input
                  input(type="text", placeholder="Your name")
          li
            .item-content
              .item-inner 
                .item-input
                  input(type="email", placeholder="E-mail")
          li
            .item-content
              .item-inner 
                .item-input
                  select
                    option Male
                    option Female
          li
            .item-content
              .item-inner 
                .item-input
                  input(type="date", placeholder="Birth day", value="2014-04-30")